<template>
    <div class="new-main">
        <div class="top" style="margin-top: 2px;">
            <div>
                <img style="height: 3rem" src="../assets/logo.png" alt="">
            </div>
            <div>
                <ul>
                    <span class="inputbox">
                        <img src="../assets/searchq.png" alt=""
                            style="position: absolute; margin-left: 165px; margin-top: 7px">
                        <input name="findMenu" id="findMenu" type="text" class="input my-input" placeholder="请输入菜单名">
                        <div class="search menuCodeUrl"
                            style="width: 200px; max-height: 200px; z-index: 999; position: absolute; display: flex; flex-direction: column; height: 0px;">
                            <ul style="width: 200px; overflow: auto; display: flex; flex-direction: column; height: 346px; margin-top: 7px; cursor: pointer"
                                class="searchul menuCodeUrl"></ul>
                        </div>
                    </span>
                    <span style="line-height: 32px; margin-left: 10px; width: 50px;">语言：</span>
                    <select style="width: 55px">
                        <option selected value="0">中文</option>
                        <option value="1">英文</option>
                    </select>
                    <li class="message over my-button" title="消息通知">
                        <span class="over-span">消息通知</span>
                        <i class="message_dot">0</i>
                    </li>
                    <li class="update over my-button" title="修改密码">
                        <span class="over-span">修改密码</span>
                    </li>
                    <li class="exit over my-button" title="注销">
                        <span class="over-span" style="left: -40%">注销</span>
                    </li>
                    <li class="user"></li>
                    <li>
                        <span>{{ username }}</span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="main">
            <div class="sidebar">
                <div class="welcome">
                    <span class="zk">教学元宇宙<br>教师端</span>
                </div>
                <div class="scrollbar">
                    <ul class="menu">
                        <li>
                            <div class="link first-level ">
                                <span class="icon iconfont icon-wode"></span>
                                <span class="text my-text" @click="showIndex = 1">个人中心</span>
                                <span class="text my-text" v-show="showIndex === 1">-></span>
                            </div>
                        </li>
                        <li>
                            <div class="link first-level ">
                                <span class="icon iconfont icon-richeng"></span>
                                <span class="text my-text" @click="showIndex = 2">账户管理</span>
                                <span class="text my-text" v-show="showIndex === 2">-></span>
                            </div>
                        </li>
                        <li>
                            <div class="link first-level ">
                                <span class="icon iconfont icon-dingdan"></span>
                                <span class="text my-text" @click="showIndex = 3">交易记录</span>
                                <span class="text my-text" v-show="showIndex === 3">-></span>
                            </div>
                        </li>
                        <li>
                            <div class="link first-level ">
                                <span class="icon iconfont icon-daka"></span>
                                <span class="text my-text" @click="showIndex = 4">课程管理</span>
                                <span class="text my-text" v-show="showIndex === 4">-></span>
                            </div>
                        </li>
                        <li>
                            <div class="link first-level ">
                                <span class="icon iconfont icon-wenjian"></span>
                                <span class="text my-text" @click="showIndex = 5">教学资源</span>
                                <span class="text my-text" v-show="showIndex === 5">-></span>
                            </div>
                        </li>
                        <li>
                            <div class="link first-level ">
                                <span class="icon iconfont icon-gouwu"></span>
                                <span class="text my-text" @click="showIndex = 6">交易平台</span>
                                <span class="text my-text" v-show="showIndex === 6">-></span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="main-content">
                <div class="my-content">
                    <div v-show="showIndex === 1">
                        <UserInfo />
                    </div>
                    <div v-show="showIndex === 2">
                        <ChainAccount />
                    </div>
                    <div v-show="showIndex == 4">
                        <CourseManagement />
                    </div>
                    <div v-show="showIndex == 5">
                        <TeachingResource />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import cookie from 'js-cookie'

import UserInfo from '@/components/UserInfo.vue'
import ChainAccount from '@/components/ChainAccount.vue'
import CourseManagement from '@/components/CourseManagement.vue'
import TeachingResource from '@/components/TeachingResource.vue'

export default {
    name: 'TeacherView',
    components: {
        UserInfo,
        ChainAccount,
        CourseManagement,
        TeachingResource,
    },
    data() {
        return {
            username: '',
            showIndex: 1
        }
    },

    async mounted() {
        this.username = cookie.get('username')
    }
}
</script>

<style>
@import url("../style/common.css");
@import url("../style/chrome.css");
@import url("../style/layui.css");
@import url("../style/layoutxs.css");
@import url("../style/newNav.css");
@import url("../style/edu-bg-back.css");
@import url("../style/main.css");

.main-content {
    flex-shrink: 0;
    background-color: #f7f7f9;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.06);
    height: 100%;
    position: relative;
    z-index: 1;
    padding: 0 10px 10px 10px;
    transition: width 0.5s ease;
    margin-top: 10px;
    margin-right: 2px;
}

.my-content {
    height: 100%;
    background-color: #FFF;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.06);
    border-radius: 4px;
    padding: 50px;
}

.my-text:hover {
    color: rgb(0, 89, 255);
}

.my-button:hover {
    cursor: pointer;
}
</style>